<template>
  <a-input-search
      v-model:value="data.searchName"
      allow-clear
      enter-button
      placeholder="请输入宣讲会名称/公司名称"
      style="width: 50%; padding: 20px;"
      size="large"
      @search="onSearch"
  />
  <a-list :data-source="listData" :grid="{ gutter: 16, column: 3 }" :pagination="pagination" item-layout="vertical"
          size="small">
    <template #footer>

    </template>
    <template #renderItem="{ item }">
      <a-list-item key="item.title" class="list-item">

        <a-card :title="item.videoName" hoverable style="width: 350px;">
          <template #extra>
            <router-link :to="{path:'/student/video/studentVideoInformation/'+item.videoId}">
            <a-button type="link">了解更多</a-button>
          </router-link></template>
          <template #cover>
            <div>
              <!--        <video controls autoplay src="http://localhost:8080/file/video"/>-->
              <video
                  ref="videoRef"
                  :autoplay="false"
                  :src="'http://localhost:8080/video-file/video?videoName='+item.videoUrl"
                  controls
                  height="200"
                  width="350"
                  @timeupdate="handleTimeUpdate"
              ></video>
              <!--
                 src: 视频路径
                 width: 视频宽度
                 height: 视频高度
                 autoplay: 是否自动播放
                 controls: 是否显示控制条
                 @timeupdate: 视频播放时触发(获取视频播放的时间)
               -->
            </div>
          </template>

          <a-card-meta :title="item.videoCompanyName" :description="getShortenedRemarks(item.videoRemarks)" >
            <template #avatar>
              <a-avatar :src="'http://localhost:8080/file/download?name='+item.videoCompanyLogo"
                        style="width: 70px; height: 70px;"/>
            </template>
          </a-card-meta>
        </a-card>

      </a-list-item>

    </template>
  </a-list>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import {pageVideoAPI} from "@/apis/video.js";


//获取数据
const listData = ref([]);
const data = ref({pageCurrent: 1, pageSize: 5,searchName:'',videoStatus:'开放',videoAdminStatus:0,videoCertificationStatus:"审核通过"});
const getData = async (data) => {
  const res = await pageVideoAPI(data)
  pagination.total = res.data.data.total
  listData.value = res.data.data.data
}
const pagination = {
  onChange: page => {
    console.log(page);
    data.value.pageCurrent = page
    getData(data.value)
  },
  pageSize: 5,
  total: 0,
};
// 生命周期
onMounted(() => {
  getData(data.value);
});

//搜索
const onSearch = searchValue => {
  console.log('use value', searchValue);
  getData(data.value);
};
//展示描述，补充信息
const getShortenedRemarks = (str) => {
  if (str.length > 10) {
    return str.slice(0, 10) + '......';
  }
  return str;
};
</script>
<style scoped>
.list-item {

}
</style>
